<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>提示页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style type="text/css">
    html,body{
        height: 100%;
        margin: 0;
        overflow: hidden;
    }
    .div_img{
      height: 80px;
      width: 100%;
      background-image: url(../image/tick.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 80px 80px;
      margin-top: 15px;
    }
    .div_img1{
      height: 85px;
      width: 100%;
      background-image: url(../image/look.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 80px 85px;
      margin-top: 50px;
    }

    .div_img2{
      height: 125px;
      width: 100%;
      background-image: url(../image/people.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 105px 125px;
      margin-top: 40px;
      margin-left: 15px;
    }

    .div_sorry{
      width: 100%;
      text-align: center;
      margin-top: 15px;
      font-size: 18px;
      color: #101010;
    }

    .div_prompt{
      font-size: 14px;
      line-height: 20px;
      color: #101010;
      margin: 20px;

    }

    .div_bottom{
      display:-webkit-box;
       margin-top: 30px;
    }
    .div_bottom_left{
     -webkit-box-flex:1.0;
     text-align: center;
    }
    .div_bottom_rigth{
      -webkit-box-flex:1.0;
      text-align: center;
    }
    .div_bottom_purchase{
      width: 130px;
      height: 35px;
      border: 1px solid #ff8000;
      color: #ff8000;
      line-height: 35px;
      font-size: 16px;
      text-align: center;
      border-radius: 5px;
    }
    .div_bottom_determine{
      width: 140px;
      height: 37px;
      background-color: #ff8000;
      color: #fff;
      line-height: 37px;
      font-size: 16px;
      text-align: center;
      border-radius: 5px;
    }
    .div_success_prompt{
      width: 100%;
      text-align: center;
      margin-top: 10px;
      font-size: 20px;
      color: #0ba4e0;
    }

    .div_bottom_nopurchase{
      width: 130px;
      height: 35px;
      border: 1px solid #ff8000;
      color: #ff8000;
      line-height: 35px;
      font-size: 16px;
      text-align: center;
      border-radius: 5px;
    }

    .div_bottom_determine1{
      width: 130px;
      height: 37px;
      background-color: #ff8000;
      color: #fff;
      line-height: 37px;
      font-size: 16px;
      text-align: center;
      border-radius: 5px;
    }

    </style>
</head>
<body>

 <div class="div_success"style="display:none">
   <div class="div_img">
   </div>
   <div class="div_success_prompt">
     放行成功
   </div>
 </div>

 <div class="div_fail" style="display:none">
   <div class="div_img1">
   </div>
   <div class="div_sorry">
     Sorry
   </div>
   <div class="div_prompt">
    您当前购买附属设备账号不足，此设备上线将会使当前在线PC下线(您可以点击下方“购买账号”按钮购买账号来增加设备使用个数)。
   </div>
   <div class="div_bottom">
     <div class="div_bottom_left">
         <div class="div_bottom_purchase">
           购买账号
         </div>
     </div>
     <div class="div_bottom_rigth">
       <div class="div_bottom_determine">
           确定
       </div>
     </div>
   </div>
 </div>

 <div class="div_equipment_release" style="display:none">
   <div class="div_img2">
   </div>
   <div class="div_sorry">
     Sorry
   </div>
   <div class="div_prompt">
    您没有购买附属设备账号,直接购买即可放行上网,是否购买？
   </div>
   <div class="div_bottom">
     <div class="div_bottom_left">
         <div class="div_bottom_nopurchase">
           不购买
         </div>
     </div>
     <div class="div_bottom_rigth">
       <div class="div_bottom_determine1">
           去购买
       </div>
     </div>
   </div>
 </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>

<script type="text/javascript">

    apiready = function(){

      var divSuccess = document.getElementsByClassName('div_success')[0];
      var divFail = document.getElementsByClassName('div_fail')[0];
      var divequipmentRelease = document.getElementsByClassName('div_equipment_release')[0];
      divequipmentRelease.style.display = 'block';
      var width = api.winWidth / 2;
      var purchase = document.getElementsByClassName('div_bottom_purchase')[0];
      var determine = document.getElementsByClassName('div_bottom_determine')[0];

      purchase.style.marginLeft = (width -130)/2+20+'px';
      determine.style.marginLeft = '-10px';

      var nopurchase = document.getElementsByClassName('div_bottom_nopurchase')[0];
      var determine1 = document.getElementsByClassName('div_bottom_determine1')[0];

      nopurchase.style.marginLeft = (width -130)/2+10+'px';
      determine1.style.marginLeft = (width -130)/2-10+'px';

    };

</script>
</html>
